<template>
    <div>
        <el-form label-width="120px" v-for="(service, index) in config.services" :key="index">
            <el-form-item label="推送地址">
                <el-input v-model="service.url" auto-complete="off" placeholder="http://或https://开头"
                    @input="onconfig" />
            </el-form-item>
            <el-form-item label="转换脚本">
                <!-- <code-editor style="width: 100%" v-model:code="service.script" /> -->
                <codemirror v-model="service.script" :options="options" @input="onconfig"></codemirror>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
//   import CodeEditor from '@/components/CodeEditor/index.vue';  
import { codemirror } from "vue-codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/3024-day.css";
import "codemirror/theme/ayu-mirage.css";
import "codemirror/theme/monokai.css";
import "codemirror/theme/rubyblue.css";
import "codemirror/mode/htmlmixed/htmlmixed.js";
import "codemirror/mode/javascript/javascript.js";

export default {
    components: {
        //   CodeEditor  
        codemirror
    },
    props: {
        config: {
            type: Object,
            default: function () {
                return {
                    type: 'http',
                    services: [
                        {
                            script: '',
                            url: '',
                        },
                    ],
                };
            }
        },
        indexes: {
            type: Number,
            default: ''
        },
    },
    data() {
        return {
            configRef: [],
            // code
            options: {
                tabSize: 4,
                mode: "text/javascript",
                // theme: "base16-light",
                theme: "monokai",
                lineNumbers: true,
                line: true,
            },
        };
    },
    watch: {
        // config: {
        //     handler: function (newVal) {
        //         // this.init(newVal);
        //     },
        //     deep: true
        // }
    },
    methods: {
        // 更新数据
        onconfig() {
            this.$emit('onconfig', this.config, this.indexes);
        },
        // init(data) {
        //     if (!this.configRef.services) {
        //         this.configRef.services = data;
        //     }
        //     if (this.configRef.services.length > 1) {
        //         this.configRef.services.splice(1, this.configRef.services.length - 1);
        //     }
        // }
    }
};
</script>

<style scoped>
.CodeMirror {
    height: 300px !important;
}
</style>
<style>
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
    line-height: 21px !important;
}
</style>